<template>
  <div>
    <content-wrapper
      :tableList="tableList"
      :searchList="searchList"
      :setting="setting"
      @changeOpt="changeOpt"
      @changeTable="changeTable"
      @formValue="formValue"
    >
      <div slot="searchLeft">
        <a-button type="primary" style="margin-right: 20px" @click="exportFile">
          <a-icon type="cloud-download" />
          导出
        </a-button>
      </div>
      <add-modal
        :visible="visible"
        :editInfo="editInfo"
        @handleCancel="handleCancel"
      ></add-modal>
    </content-wrapper>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {
    contentWrapper: () => import("@/components/contentWrapper/index"),
    addModal: () => import("@/views/activity/task/edit")
  },
  data() {
    return {
      visible: false,
      tableList: {
        columns: [
          {
            title: "ID",
            dataIndex: "id",
            width: 60
          },
          {
            title: "缩略图",
            dataIndex: "img",
            type: "img",
            scopedSlots: { customRender: "img" },
            width: 100
          },
          {
            title: "标题",
            dataIndex: "text",
            width: 100,
            type: "title",
            scopedSlots: { customRender: "text" }
          },
          {
            title: "描述",
            dataIndex: "describe",
            width: 350,
            scopedSlots: { customRender: "describe" }
          },
          {
            title: "积分",
            dataIndex: "integral"
          },
          {
            title: "排序",
            dataIndex: "sort"
          },
          {
            title: "操作",
            dataIndex: "opt",
            width: 80,
            type: "btn",
            list: [
              {
                ath: "editActivityList",
                label: "编辑",
                extraValue: "edit",
                className: "text-green"
              }
            ],
            scopedSlots: { customRender: "opt" }
          }
        ],
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0
        },
        sorter: {}
      },
      searchList: [
        {
          type: "input",
          label: "关键字",
          placeholder: "关键字",
          name: "key"
        }
      ],
      setting: {},
      searchInfo: {
        title: ""
      },
      editInfo: {}
    };
  },
  methods: {
    handleCancel(isFresh) {
      if (isFresh) {
        this.getInfo();
      }
      this.visible = false;
    },
    changeOpt(item, type) {
      switch (type) {
        case "edit":
          this.edit(item);
      }
    },
    changeTable(pagination) {
      Object.assign(this.tableList.pagination, pagination);
      this.getInfo();
    },
    formValue(values) {
      this.tableList.pagination.current = 1;
      Object.assign(this.searchInfo, values);
      this.getInfo();
    },
    exportFile() {
      let url = this.$api.downloadActivityList;
      if (this.searchInfo.title) {
        url += "&data=" + this.searchInfo.title;
      } else {
        url += "&data=";
      }
      url +=
        "&excel_download=1&token=" +
        this.$crypto.getAES(localStorage.getItem("token"));
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", url); // href链接
      a.click(); // 自执行点击事件
    },
    edit(data) {
      this.visible = true;
      this.editInfo = data;
    },
    getInfo() {
      this.$ajax
        .get(this.$api.getActivityList, {
          page_size: this.tableList.pagination.pageSize,
          page: this.tableList.pagination.current,
          data: this.searchInfo.title
        })
        .then(res => {
          this.tableList.dataSource = res.data;
          this.tableList.pagination.total = res.total_count;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
